<script setup>
import { ref,watch,onMounted } from 'vue';
import axios from 'axios';
import { BrowseIcon } from 'tdesign-icons-vue-next';
import {IceCreamRound,Edit} from '@element-plus/icons-vue'
import { MessagePlugin } from 'tdesign-vue-next';
import { useUserStore,useQueryStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()

const userStore = useUserStore()
const queryStore = useQueryStore()
const dataform = ref({
    username: userStore.user.username,
    sex: userStore.user.sex,
    age: userStore.user.age,
    phone: userStore.user.phone,
    userVx: userStore.user.userVx,
    applicOrRecru: userStore.user.applicRecru === 0?'求职者':'招聘者',
    city: userStore.user.city,
})


const img = 'https://tupian.qqw21.com/article/UploadPic/2021-2/202121219531349614.jpg';

const visible = ref(false);
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const onOpen = () => (visible.value = true);
//------------------------

const file2 = ref([{url: userStore.user.avatar }]);

const fileFail = ref([]);
const disabled = ref(false);
const uploadAllFilesInOneRequest = ref(false);
const autoUpload = ref(true);
const showImageFileName = ref(true);

const uploadRef2 = ref();

const handleFail = ({ file }) => {
  MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
const avatar = ref(null);
const formatImgResponse = (result) => {
    if(result.code === 1){
        getAllInfo()
        return {url: result.data };
    }else{
        MessagePlugin.error(result.msg)
    }
};
const uploadFiles = () => {
  uploadRef2.value.uploadFiles();
};
const beforeUpload = (file) => {
  if (file.size > 5 * 1024 * 1024) {
    MessagePlugin.warning('上传的图片不能大于5M');
    return false;
  }
  return true;
};
//----------------------------------
const uploadRef1 = ref();

const files1 = ref([]);
watch(files1, (x,y)=>{
    // console.log(files1.value)
    files1.value = ref([])
})

const multiple = ref(false);
const uploadInOneRequest = ref(false);
const autoUpload1 = ref(true);
const isBatchUpload = ref(false);
const disabled1 = ref(false);

const handleFail1 = ({ file }) => {
  MessagePlugin.error(`文件 ${file.name} 上传失败`);
};

const handleSuccess = (result) => {
    if(result.response.code === 1){
        getAllInfo()
        MessagePlugin.success('上传成功');
        
    }else{
        MessagePlugin.error(result.response.msg)
    }
};

// 多文件上传，一个文件一个请求场景，每个文件也会单独触发上传成功的事件
const onOneFileSuccess = (params) => {
  console.log('onOneFileSuccess', params);
};

// 文件大小超出限制、文件同名时会触发等场景。
const onValidate = (params) => {
  const { files, type } = params;
//   console.log('onValidate', type, files);
  const messageMap = {
    FILE_OVER_SIZE_LIMIT: '文件大小超出限制，已自动过滤',
  };
  // you can also set Upload.tips and Upload.status to show warning message.
  messageMap[type] && MessagePlugin.warning(messageMap[type]);
};

// 非自动上传文件，需要在父组件单独执行上传请求
const uploadFiles1 = () => {
  uploadRef1.value.uploadFiles1();
};

const formatResponse = () => {
  return { error: '上传失败，请重试' };
};

const handleProgress = (params) => {
  console.log('progress', params);
};

//----------------------------------
const onClick1 = (context) => {
    visible1.value = true;
};
const onClick2 = (context) => {
    visible2.value = true;
};
const onClick3 = (context) => {
    visible3.value = true;
};

const onConfirmAnother1 = (context) => {
  console.log('点击了确认按钮', context);
  modifiedInfo()
  visible1.value = false;
};
const onConfirmAnother2 = (context) => {
    if(password_change.value.password === password_change.value.repassword){
        modifiedPassword()
        visible2.value = false;
    }else {
        MessagePlugin.error("两次密码不一致！")
    }
    password_change.value.password = ''
    password_change.value.repassword = ''
};
const onConfirmAnother3 = (context) => {
  console.log('点击了确认按钮', context);
  modifiedExpect()
  visible3.value = false;
};
const close = (context) => {
  console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
};
const getToken = {
    authentication: userStore.token,
}

const value = ref('')

const options = [
  {
    value: '求职者',
    label: '求职者',
  },
  {
    value: '招聘者',
    label: '招聘者',
  }
]
const password_change = ref({
    password: '',
    repassword: '',
})
const expect_data = ref({
    user_stage: !userStore.user.userStage?'暂未设置':userStore.user.userStage,
    expect_job: userStore.user.expectJob,
    expect_city: !userStore.user.expectCity?'暂未设置':userStore.user.expectCity,
    expect_salary_bottom: userStore.user.expectSalaryBottom,
    expect_salary_top: userStore.user.expectSalaryTop,
})
const getsalary = () => {
    if(userStore.user.expectSalaryTop === 0){
        return '暂未设置'
    }
    const salary = userStore.user.expectSalaryBottom / 1000 + '-' + userStore.user.expectSalaryTop / 1000 + 'K';
    return salary;
}
//------------------------------------
const getAllInfo = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.post('http://localhost:8000/user/getInfo',{},{
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            userStore.login_success(resp.data.data)
            queryStore.setQuery({
                job: userStore.user.expectJob,
            })
        }else{
            MessagePlugin.warning(msg)
        }
    }).catch(error => {
        MessagePlugin.error("请求失败！")
    })
}
const modifiedInfo = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.post('http://localhost:8000/user/modified/info',{
        username: dataform.value.username,
        sex: dataform.value.sex,
        age:dataform.value.age,
        phone:dataform.value.phone,
        applicRecru: dataform.value.applicOrRecru === '求职者'?0:1,
        city:dataform.value.city,
        userVx:dataform.value.userVx,
    },{
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            getAllInfo()
        }
    })
}

const modifiedPassword = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.get('http://localhost:8000/user/modified/password',{
        params:{
            password: password_change.value.password,
        },
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            MessagePlugin.success("修改成功！")
        }else{
            MessagePlugin.warning(resp.data.msg)
        }
    }).catch(error => {
        MessagePlugin.error("修改失败！")
    })
}
const modifiedExpect = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.post('http://localhost:8000/user/modified/expect',{
        expectJob: expect_data.value.expect_job,
        expectCity: expect_data.value.expect_city,
        userStage: expect_data.value.user_stage,
        expectSalaryBottom: expect_data.value.expect_salary_bottom,
        expectSalaryTop: expect_data.value.expect_salary_top,
    },{
        headers: {
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            MessagePlugin.success("设置成功！")
            getAllInfo()
        }else{
            MessagePlugin.warning(resp.data.msg)
        }
    }).catch(error => {
        MessagePlugin.error("设置失败！")
    })
}
const openFile = () => {
    //简历文件预览
    let path = 'http://view.xdocin.com/xdoc?_copyable=true&_toolbar=true&_xdoc=';
    window.open(path + userStore.user.userBio)
}
 
</script>

<template>
    <div style="padding: 0px 100px;background-color: rgb(39, 148, 211);">
        <div style="padding: 0px 20px;">
            
        <div style="padding: 20px 30px;">
            <div style="float: left; width: 200px; font-size: 25px;font-weight: 800; color: white; margin-bottom: 30px;">*个人信息</div>
            <div style="display: inline-block; width: 1000px;">
            <el-card style="margin-bottom: 10px;">
                <div style="margin-bottom: 10px; font-weight: 900;font-size: 17px;">头像</div>
                    <div></div>
                    <t-upload
                        ref="uploadRef2"
                        v-model="file2"
                        action="http://localhost:8000/user/upload"
                        theme="image"
                        :headers="getToken"
                        accept="image/*"
                        :disabled="disabled"
                        :auto-upload="autoUpload"
                        :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                        :show-image-file-name="showImageFileName"
                        :format-response="formatImgResponse"
                        @fail="handleFail"
                        :before-upload="beforeUpload"
                    ></t-upload>
            </el-card>
            <el-card>
                <div>
                    <t-descriptions  title="个人资料">
                        <t-descriptions-item label="用户名:">{{userStore.user.username}}</t-descriptions-item>
                        <t-descriptions-item label="真实姓名:">{{userStore.user.realName}}</t-descriptions-item>
                        <t-descriptions-item label="性别:">{{userStore.user.sex}}</t-descriptions-item>
                        <t-descriptions-item label="年龄:">{{userStore.user.age}}</t-descriptions-item>
                        <t-descriptions-item label="电话:">{{userStore.user.phone}}</t-descriptions-item>
                        <t-descriptions-item label="微信:">{{userStore.user.userVx}}</t-descriptions-item>
                        <t-descriptions-item label="实名身份证号:">{{userStore.user.cardId}}</t-descriptions-item>
                        <t-descriptions-item label="当前身份:">{{dataform.applicOrRecru}}</t-descriptions-item>
                        <t-descriptions-item label="注册时间:">{{userStore.user.createTime}}</t-descriptions-item>
                        <t-descriptions-item label="所在城市:">{{userStore.user.city}}</t-descriptions-item>
                      </t-descriptions>
                      <t-divider />
                      <div style="padding: 0px 20px; margin-top: 30px;">
                        <t-button variant="outline" @click="onClick1" theme="primary"
                        style="width: 110px;
                        "><el-icon style="position: relative;top: 4px;margin-right: 5px;"><Edit /></el-icon>编辑</t-button>
                        <t-button variant="outline" @click="onClick2" theme="primary"
                        style="width: 110px;
                        margin-left: 670px;"><el-icon style="position: relative;top: 4px;margin-right: 5px;"><IceCreamRound /></el-icon>修改密码</t-button>
                        
                        <t-space>
                            
                            <t-dialog
                              v-model:visible="visible1"
                              header="修改个人资料"
                              width="40%"
                              :confirm-on-enter="true"
                              :on-cancel="onCancel"
                              :on-esc-keydown="onEscKeydown"
                              :on-close-btn-click="onCloseBtnClick"
                              :on-overlay-click="onOverlayClick"
                              :on-close="close"
                              :on-confirm="onConfirmAnother1"
                            >
                              <t-space direction="vertical" style="width: 100%">
                                <div>
                                    <table>
                                        <tr class="table_row">
                                            <td>用户名：</td>
                                            <td>
                                                <el-input v-model="dataform.username" class="table_input"/>
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>性别：</td>
                                            <td>
                                                <div class="my-2 flex items-center text-sm">
                                                    <el-radio-group v-model="dataform.sex" class="ml-4">
                                                      <el-radio value="男" >男</el-radio>
                                                      <el-radio value="女" >女</el-radio>
                                                    </el-radio-group>
                                                  </div>
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>年龄：</td>
                                            <td>
                                                <el-input v-model="dataform.age" class="table_input"/>
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>电话：</td>
                                            <td>
                                                <el-input v-model="dataform.phone" class="table_input"/>
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>微信：</td>
                                            <td>
                                                <el-input v-model="dataform.userVx" class="table_input"/>
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>当前身份：</td>
                                            <td>
                                                <t-select
                                                    v-model="dataform.applicOrRecru"
                                                    placeholder="请选择"
                                                    :options="options"
                                                    size="medium"
                                                    
                                                    style="width: 200px; display: inline-block; margin-right: 20px"
                                                    />
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td>所在城市：</td>
                                            <td>
                                                <el-input v-model="dataform.city" class="table_input"/>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                
                              </t-space>
                            </t-dialog>
                          </t-space>
                          <t-space>
                            
                            <t-dialog
                              v-model:visible="visible2"
                              header="修改密码"
                              width="500px"
                              :confirm-on-enter="true"
                              :on-cancel="onCancel"
                              :on-esc-keydown="onEscKeydown"
                              :on-close-btn-click="onCloseBtnClick"
                              :on-overlay-click="onOverlayClick"
                              :on-close="close"
                              :on-confirm="onConfirmAnother2"
                            >
                              <t-space direction="vertical" style="width: 100%">
                                <div>
                                    <table style="padding-left: 20px;">
                                        <tr class="table_row">
                                            <td >请输入新密码:</td>
                                            <td >
                                                <el-input v-model="password_change.password" />
                                            </td>
                                        </tr>
                                        <tr class="table_row">
                                            <td >请再次输入新密码:</td>
                                            <td >
                                                <el-input v-model="password_change.repassword" />
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                              </t-space>
                            </t-dialog>
                        </t-space>
                    </div>
                </div>
            </el-card>
        </div>
    </div>

    <div style="padding: 20px 30px;">
        <div style="float: left; width: 200px; font-size: 25px;font-weight: 800; color: white; margin-bottom: 30px;">*简历管理</div>
        <div style="width: 1000px; display: inline-block;">
            <el-card>
                <div style="height: 60px; display: flex;align-items: center;">
                    <el-button v-if="userStore.user.userBio" @click="openFile" >查看我的附件简历</el-button>
                    <div v-if="!userStore.user.userBio" style="font-size: 13px;color: #999999;">您还没有上传简历哦，可以点击下方上传您的简历，让更多HR看到。</div>
                </div>
                <t-divider style="margin: 0px !important;"/>
                <div style="height: 60px;display: flex;align-items: center;">
                    <div style="float: left; margin-right: 20px;">上传简历:</div>
                    <t-upload
                    style="margin-top: 30px;"
                        ref="uploadRef1"
                        v-model="files1"
                        action="http://localhost:8000/user/upload/bio"
                        :headers="getToken"
                        placeholder="要求文件大小在 10M 以内"
                        :multiple="multiple"
                        :auto-upload="autoUpload1"
                        accept=".pdf"
                        :upload-all-files-in-one-request="uploadInOneRequest"
                        :is-batch-upload="isBatchUpload"
                        :size-limit="{ size: 10, unit: 'MB' }"
                        :max="1"
                        :disabled="disabled1"
                        :allow-upload-duplicate-file="true"
                        @select-change="handleSelectChange"
                        @fail="handleFail1"
                        @success="handleSuccess"
                        @one-file-success="onOneFileSuccess"
                        @validate="onValidate"
                    />
                    <span style="font-size: 13px;color: #999999;">仅支持.pdf格式文件</span>
                </div>
            </el-card>
        </div>
    </div>
        <div style="padding: 20px 30px;">
            <div style="float: left; width: 200px; font-size: 25px;font-weight: 800; color: white; margin-bottom: 30px;">
                *求职偏好
            </div>
            <div style="width: 1000px;display: inline-block;">
                <el-card>
                    <table>
                        <tr style="height: 30px;">
                            <td class="expect-1">个人求职身份：</td>
                            <td class="expect-2">{{!userStore.user.userStage?'暂未设置':userStore.user.userStage}}</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td class="expect-1">意向职位：</td>
                            <td class="expect-2">{{userStore.user.expectJob}}</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td class="expect-1">意向城市：</td>
                            <td class="expect-2">{{userStore.user.expectCity}}</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td class="expect-1">意向薪资：</td>
                            <td class="expect-2">{{getsalary()}}</td>
                        </tr>
                    </table>
                    <t-divider />
                    <div>
                        <el-button @click="onClick3" type="primary">更改爱好</el-button>
                        <t-dialog
                            v-model:visible="visible3"
                            header="设置求职偏好"
                            width="500px"
                            :confirm-on-enter="true"
                            :on-cancel="onCancel"
                            :on-esc-keydown="onEscKeydown"
                            :on-close-btn-click="onCloseBtnClick"
                            :on-overlay-click="onOverlayClick"
                            :on-close="close"
                            :on-confirm="onConfirmAnother3"
                        >
                            <t-space direction="vertical" style="width: 100%">
                            <div>
                                <table style="padding-left: 20px;">
                                    <tr>
                                        <td></td>
                                        <td>
                                            <div style=" text-align: right;color: #999999;font-size: 13px;">阶段(应届生/在校生/职场人士)</div>
                                        </td>
                                    </tr>
                                    
                                    <tr class="table_row">
                                        <td >设置阶段:</td>
                                        <td >
                                            <el-input v-model="expect_data.user_stage" />
                                        </td>
                                    </tr>
                                    <tr class="table_row">
                                        <td >设置意向职位:</td>
                                        <td >
                                            <el-input v-model="expect_data.expect_job" />
                                        </td>
                                    </tr>
                                    <tr class="table_row">
                                        <td >设置意向城市:</td>
                                        <td >
                                            <el-input v-model="expect_data.expect_city" />
                                        </td>
                                    </tr>
                                    <tr class="table_row">
                                        <td >设置最低意向薪资:（元/月）</td>
                                        <td >
                                            <el-input v-model="expect_data.expect_salary_bottom" />
                                        </td>
                                    </tr>
                                    <tr class="table_row">
                                        <td >设置最高意向工资:（元/月）</td>
                                        <td >
                                            <el-input v-model="expect_data.expect_salary_top" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            </t-space>
                        </t-dialog>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</div>
    
</template>

<style scoped>
.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--td-text-color-anti);
  line-height: 22px;
  transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
  opacity: 1;
  cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
  padding: 0 16px;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  color: var(--td-text-color-anti);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
  flex: 1;
}

.tdesign-demo-popup__reference {
  margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
  cursor: pointer;
}

.tdesign-demo-image-viewer__base {
  width: 160px;
  height: 160px;
  margin: 10px;
  border: 4px solid var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
}

.table_row{
    height: 55px;
}
.table_input{
    width: 400px;
    height: 35px;
}
.expect-1{
    color: #999999;
    width: 200px;
    font-size: 14px;
}
.expect-2{
    font-size: 15px;
}
</style>